import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx'
import {Tools,Tabs,ActionSheet,ActivityIndicator} from 'weaver-mobile';
import { ListAdvanced,DocumentTitle } from 'weaver-mobile-page';
import { withRouter } from 'react-router-dom';
import { StickyContainer } from 'react-sticky';
import {openWorkFlow} from '../../util/pulic-func'
const getLabel = Tools.getLabel;

const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
    wrapProps = {
        onTouchStart: e => e.preventDefault(),
    };
}


@withRouter
@inject ('applyStore')
@observer
class Apply extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            visible: true,//申请-新建张开
            show: false,  //报销类型展开
        };
        this.sreenHeight = 0; 
        
    }

    static defaultProps = {
        prefixCls:"fna-apply"
    }   
    
    componentWillMount(){
        const {applyStore} = this.props;
        const {getTab} = applyStore;
        getTab()
    }    

    componentDidMount() {
        const { applyStore,match:{params:{pending}} } = this.props;
        const { setTabVisible } = applyStore;

        this.sreenHeight = document.documentElement.clientHeight;

        if(pending == 'true'){setTabVisible(false);}
        this.initRequest();

    }  
    
    componentWillUnmount(){
        const { applyStore } = this.props;
        const { clearData } = applyStore;
        clearData();
        ActionSheet.close();

    }

    render() {
        const { applyStore,prefixCls } = this.props;
        const { tabs,listAd,selectKey,tabVisible,loading } = applyStore;

        return (
            <div className={`${prefixCls}`}>
                <DocumentTitle data={[{ match: /^\/apply\/false/i, title: () => getLabel(513982,"申请") }]} defaultTitle={getLabel(513982,"申请")} />
                <ActivityIndicator
                    toast
                    text="Loading..."
                    animating={loading}
                />
                <StickyContainer>
                    {tabVisible && <Tabs 
                        tabs={tabs}
                        page={selectKey}
                        initialPage={0}
                        onChange={(tab,index)=>{this.changeTab(tab,index)}}
                        // swipeable={false}
                    />}
                        <div className={`${prefixCls}-tabPage`}>
                            <ListAdvanced 
                                className={'fna-apply-listAdvanced'}
                                store={listAd}
                                hasAdvanceSerach
                                rowKey="requestid"
                                searchKey="requestname"
                                treeKey="domid"
                                onRowClick={(data)=>{openWorkFlow('view',data.requestid,()=>{
                                    this.initRequest();
                                })}}
                                getTemplate={this.getTemplate}
                                dataFetchOptions={{
                                    url: '/api/fna/fnaEmbileMicroReport/getUpComingAll',
                                    method: 'GET',
                                    params:{
                                        comeFrom:'more',
                                        menuid: -1
                                    }
                                }}
                                // searchBarProps={{
                                //     showSelectButton: true,
                                //     selectText: getLabel(63, '类型'),
                                //     onSelectButtonClick: () => {},
                                //     placeholder: getLabel(517352, '请输入费用类型名称'),
                                
                                // }}
                                conditionFetchOptions={{
                                    url: '/api/fna/fnaEmbileMicroReport/getUpComingAS',
                                    method: 'GET',
                                    params:{
                                        comeFrom:'more'
                                    }
                                }}
                                leftTreeFetchOptions={{
                                    url: '/api/fna/fnaEmbileMicroReport/getUpComingAS',
                                    method: 'GET',
                                    params:{
                                        comeFrom:'more'
                                    }
                                }}
                                showCheck={false}
                                onSearch={this.onSearch}
                                // onLeftTreeChange={this.onLeftTreeChange}
                            />
                        </div>

                    
                </StickyContainer>

                <div className={`${prefixCls}-add`} onClick={()=>{this.getReimbursement()}}>
                    <img src="/images/fna/fnaMobile/unfold.png" width="50" height="50"/> 
                </div>
            </div>
        )
    }

    //初始化请求
    initRequest = () =>{
        const { applyStore } = this.props;
        const { listAd,getInvoiceCreatWorkflow } = applyStore;
        const { listViewStore } = listAd; 

        let params = {
            comeFrom:'more',
            viewScope:'doing'
        }
        listViewStore.clearData();
        listAd.getData({ url:'/api/fna/fnaEmbileMicroReport/getUpComingAll',  method:'GET',params:{...params}});
        getInvoiceCreatWorkflow();
    }    

    getReimbursement = () =>{
        const { applyStore } = this.props;
        const { workflowSelect,clearData } = applyStore;
        let allMonth = workflowSelect;
        ActionSheet.showActionSheetWithOptions({
            options: allMonth,
            cancelButtonIndex: allMonth.length - 1,
            maskClosable: true,
            'data-seed': 'logId',
            wrapProps,
        },  
        (buttonIndex) => {
            if(buttonIndex != allMonth.length - 1 && buttonIndex != 'undefined'){
                openWorkFlow('add',workflowSelect[buttonIndex].id,()=>{
                    clearData();
                    this.initRequest();
                });
            }
                
        });    
    }    

    changeTab = (tab,index) =>{
        const {applyStore} = this.props;
        const { setSelectKey,listAd,leftParams } = applyStore;
        const { listViewStore,searchParams,searchAdvancedStore } = listAd;
        // searchAdvancedStore.form.resetFields();
        setSelectKey(index);

        let params = { ...searchParams };
        if (searchAdvancedStore) {
            const { formParams } = searchAdvancedStore.form;
            params = { 
                ...formParams, 
                // ...leftParams 
            };
        }

        let viewScope = index == '1' ? 'mine' : 'doing';
        params = { ...params, viewScope:viewScope, comeFrom:'more',}
       
        listViewStore.clearData();
        listAd.getData({ url:'/api/fna/fnaEmbileMicroReport/getUpComingAll',  method:'GET',params:{...params}});
    }


    //左侧树回调
    onLeftTreeChange = (domid, name, valueArray) =>{
        const {applyStore} = this.props;
        const { setLeftParams } = applyStore;

        setLeftParams({
            id:domid,
            name:name
        });

        this.onSearch();
    }  
    
    onSearch = (status = {}) => {
        const {applyStore} = this.props;
        const { listAd, leftParams,selectKey } = applyStore;
        const { searchAdvancedStore, searchParams,listViewStore } = listAd;

        // 搜索框等搜索数据
        let params = { ...searchParams };
        // 获取高级搜索参数
        if (searchAdvancedStore) {
            const { formParams } = searchAdvancedStore.form;
            params = { 
                ...formParams, 
                // ...leftParams 
            };
        }
        // 清除列表数据
        listViewStore.clearData();

        //获取流程数据
        params = {
            ...params,
            comeFrom:'more',
            menuid: -1,
        }

        let viewScope = selectKey == '1' ? 'mine' : 'doing';
        params = Object.assign(params,{
            viewScope:viewScope
        })

        // 带参数请求列表数据
        listAd.getData({ url:'/api/fna/fnaEmbileMicroReport/getUpComingAll',  method:'GET',params:{...params}});
    }

    //获取模板  待办事项
    getTemplate = (template) => {
        const {applyStore} = this.props;
        const {} = applyStore;

        const newTemplate = {
            default: [
                {
                    key: 'col1',
                    // style: { flex: '0 0 auto'},
                    render: (data) => {
                        let {requestname,requestmarkspan,createdate,currentnodetypespan,createrspan,amountspan,requestnamespan} = data;
                        return(
                            <div className={`fna-home-template-list`}>
                                <div className={`fna-home-template-list-head`}>
                                    <span dangerouslySetInnerHTML={{__html: requestname}}/>
                                    <span dangerouslySetInnerHTML={{__html: currentnodetypespan}} />
                                </div>

                                <div dangerouslySetInnerHTML={{__html: requestmarkspan}} className={`word-fontSize-12 fna-home-template-list-detail`}/>
                                <div className={`word-fontSize-12 fna-home-template-list-detail`}>
                                    <span>{createrspan}：</span><span>{createdate}</span>  
                                </div>
                                <div className={'last'}>
                                    <span className={'costBtn'}>{requestnamespan}</span>
                                    <span className={'gay'}>
                                        <span>{amountspan}</span>
                                    </span>
                                </div>
                            </div>
                            
                        )
                    }
                },  

                    
            ],
        };

        return newTemplate;
    }    
    

}

export default Apply;